<template>
  <div>
    <el-table
      size="small"
      :data="admlist"
      style="width: 100%"
    >
      <el-table-column label="管理员编号" prop="_id" width="190%"></el-table-column>
      <el-table-column label="管理员名字" prop="username"></el-table-column>
      <el-table-column label="管理员密码" prop="password"></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" @click="centerDialogVisible = true">修改</el-button>
          <!-- <template v-if="true"></template> -->
          <el-dialog title="修改信息" :visible.sync="centerDialogVisible" >
            <el-form >
              <el-form-item label="管理员名字：">
                <el-input  autocomplete="off" v-model="scope.row.username"></el-input>
              </el-form-item>
              <el-form-item label="管理员密码：">
                <el-input  autocomplete="off" v-model="newpassword"></el-input>
              </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button @click="centerDialogVisible = false">取 消</el-button>
              <el-button type="primary" :plain="true" @click="updateadm(scope.row)">确 定</el-button>
            </div>
          </el-dialog>

          <el-button
            size="mini"
            type="danger"
            @click="deleteadm(scope.row)"
            :plain="true"
          >删除</el-button>
        </template>
      </el-table-column>
    </el-table>      
  </div>
</template>

<script>
import axios from "axios";
import { createNamespacedHelpers } from "vuex";
const {
  mapState,
  mapGetters,
  mapMutations,
  mapActions
} = createNamespacedHelpers("adm");

export default {
  data() {
    return {
      search: {
        searchType: "",
        searchValue: ""
      },
      centerDialogVisible: false,
      newpassword:"",
    };
  },
  computed: {
    ...mapState(["admlist"]),
  },
  created() {
    this.getadmAsync();
    // console.log(this.pageData);
  },
  methods: {
    ...mapMutations([]),
    // ...mapMutations(["updateStudents", "close"]),
    ...mapActions([
      "getadmAsync" , "addadmAsync" , "deleteadmAsync" ,"updateadmAsync"
    ]),
   deleteadm(row){
     this.deleteadmAsync(row);
     this.getadmAsync();
   },
   updateadm(row){
     this.updateadmAsync(row);
     this.centerDialogVisible = false
     this.getadmAsync();
   }
  }
};
</script>

<style>
.el-table__header-wrapper .has-gutter tr th {
  line-height: 60px;
}
.has-gutter .cell{
  text-align: center;
  font-size: 14px;
}
.el-table__row .cell{
  text-align: center;
}
.is-right button{
  margin-right: 5px;
}
.el-dialog {
  width: 440px;
}
.el-form-item {
  padding: 0 40px;
}
.el-dialog__header {
  display: flex;
}
.el-dialog .el-input {
  width: 260px;
}
.el-dialog__close {
  display: none;
}
.dialog-footer{
  padding-right: 40px;
}

.el-pagination {
  margin-top: 10px;
  height: 30px !important;
}
.studentsImage{
  width: 50px;
}
.el-select .el-input {
    width: 130px;
  }
  .input-with-select .el-input-group__prepend {
    background-color: #fff;
  }
  .bans{
    line-height: 60px;
  }
</style>